<template>
  <div class="dashboard">
    <el-row gutter="20">
      <el-col :span="6">
        <el-card class="dashboard-card" shadow="hover">
          <div class="card-content">
            <el-icon :size="30">
              <i class="el-icon-s-data"></i>
            </el-icon>
            <div class="card-info">
              <h3>总销售额</h3>
              <p class="amount">$12,345</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="dashboard-card" shadow="hover">
          <div class="card-content">
            <el-icon :size="30">
              <i class="el-icon-s-order"></i>
            </el-icon>
            <div class="card-info">
              <h3>新订单</h3>
              <p class="amount">67</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="dashboard-card" shadow="hover">
          <div class="card-content">
            <el-icon :size="30">
              <i class="el-icon-s-custom"></i>
            </el-icon>
            <div class="card-info">
              <h3>活跃用户</h3>
              <p class="amount">890</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="dashboard-card" shadow="hover">
          <div class="card-content">
            <el-icon :size="30">
              <i class="el-icon-s-help"></i>
            </el-icon>
            <div class="card-info">
              <h3>待处理任务</h3>
              <p class="amount">12</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row gutter="20">
      <el-col :span="12">
        <el-card class="dashboard-card" shadow="hover">
          <h2>通知和警告</h2>
          <div class="notifications">
            <div class="notification success">
              <h4>系统通知</h4>
              <p>系统运行正常。所有服务都在正常工作，没有检测到异常。</p>
              <p><strong>更新时间:</strong> 2024年8月19日 14:00</p>
            </div>
            <div class="notification warning">
              <h4>警告</h4>
              <p>请检查系统日志，发现有几个警告信息，需要进行检查。</p>
              <p><strong>更新时间:</strong> 2024年8月19日 13:45</p>
            </div>
            <div class="notification info">
              <h4>信息</h4>
              <p>服务器维护将在8月20日晚上12点开始，预计持续2小时。</p>
              <p><strong>更新时间:</strong> 2024年8月19日 12:00</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="dashboard-card" shadow="hover">
          <h2>数据图表</h2>
          <!-- 订单统计图表 -->
          <div id="orderChart" style="width: 100%; height: 400px;"></div>
          <!-- 库存统计图表 -->
          <div id="stockChart" style="width: 100%; height: 400px;"></div>
          <!-- 这里可以插入图表组件，如 echarts -->
          <p>图表展示区域</p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ElCard, ElRow, ElCol, ElIcon } from 'element-plus';
import * as echarts from 'echarts';

export default {
  components: {
    ElCard,
    ElRow,
    ElCol,
    ElIcon
  },
  mounted() {
    this.initOrderChart();
    this.initStockChart();
  },
  methods: {
    initOrderChart() {
      const chart = echarts.init(document.getElementById('orderChart'));
      const option = {
        title: {
          text: '订单统计'
        },
        tooltip: {},
        legend: {
          data: ['订单数量']
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        series: [{
          name: '订单数量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 30]
        }]
      };
      chart.setOption(option);
    },
    initStockChart() {
      const chart = echarts.init(document.getElementById('stockChart'));
      const option = {
        title: {
          text: '库存统计'
        },
        tooltip: {},
        legend: {
          data: ['库存数量']
        },
        xAxis: {
          data: ['智能手表', '蓝牙耳机', '运动手环', '智能音箱', 'VR眼镜', '游戏机', '平板电脑']
        },
        yAxis: {},
        series: [{
          name: '库存数量',
          type: 'bar',
          data: [50, 200, 300, 80, 70, 110, 130]
        }]
      };
      chart.setOption(option);
    }
  }
};
</script>

<style scoped>
.dashboard {
  padding: 20px;
  background-color: #f4f6f9;
}

.dashboard-card {
  margin-bottom: 20px;
  border-radius: 10px;
}

.card-content {
  display: flex;
  align-items: center;
}

.card-info {
  margin-left: 15px;
}

.card-info h3 {
  margin: 0;
  color: #333;
}

.amount {
  font-size: 24px;
  color: #409eff;
}

.el-card {
  background-color: #ffffff;
}

.notifications {
  padding: 10px;
}

.notification {
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.notification.success {
  background-color: #d4edda;
  color: #155724;
}

.notification.warning {
  background-color: #fff3cd;
  color: #856404;
}

.notification.info {
  background-color: #d1ecf1;
  color: #0c5460;
}

.notification h4 {
  margin: 0 0 5px;
}

.notification p {
  margin: 0;
}
</style>
